<template>
  <div class="find-music">
    <NavBar></NavBar>
    <div class="wrap">
      <ul>
        <li @click="$router.push('/recommend')">推荐</li>
        <li @click="$router.push('/rank')">排行榜</li>
        <li @click="$router.push('/songlist')">歌单</li>
        <li>主播电台</li>
        <li @click="$router.push('/singer')">歌手</li>
        <li>新碟上架</li>
      </ul>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar/index'
export default {
  name: 'FindMusic',
  components: {
    NavBar
  }
}
</script>

<style lang="less" scoped>
.find-music {
  .main {
    width: 980px;
    margin: 0 auto;
  }
  .wrap {
    background-color: #C20C0C;
    ul {
      width: 1100px;
      margin: 0 auto;
      display: flex;
      text-align: center;
      font-size: 14px;
      padding-left: 180px;
      color: #fff;
      li {
        width: 84px;
        height: 34px;
        line-height: 34px;
      }
      li:hover {
        background-color: #9B0909;
      }
    }
  }
}
</style>
